<script setup>
import { ref } from 'vue'
import Header from "@/components/Header.vue"
import CourseDirectory from "@/components/CourseDirectory.vue"
import VideoPlayer from "@/components/VideoPlayer.vue"
import TextPlayer from "@/components/TextPlayer.vue";

// 当前选中的小节
const currentSection = ref(null);

// 动态加载的组件
const currentComponent = ref(null);

// 处理小节选择事件
function handleSectionSelect(section) {
  currentSection.value = section;

  // 根据 type 动态加载组件
  if (section.type === 'video') {
    currentComponent.value = VideoPlayer;
  } else if (section.type === 'text') {
    currentComponent.value = TextPlayer;
  } else {
    currentComponent.value = null;
  }
}

</script>

<template>

  <div class="common-layout">
    <el-container>
      <el-header>
        <Header/>
      </el-header>
      <el-container>
        <el-aside width="350px">
          <CourseDirectory
          @select-section="handleSectionSelect"
          />
        </el-aside>
        <el-main>
          <component
            :is="currentComponent"
            v-if="currentSection"
            :sectionId="currentSection.sectionId"
          />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>

el-aside {
  height: 100vh;
}

</style>
